import React from "react";
import {
  Form,
  Input,
  InputNumber,
  Select,
  Cascader,
  DatePicker,
  Button,
  Switch,
  TimePicker,
  FormInstance
} from "antd";
import FormUpload from "./FormUpload.tsx";
import FormRichEditor from "./FormRichEditor.tsx";
import FormMarkEditor from "./FormMarkEditor.tsx";
import FormJsonEditor from "./FormJsonEditor.tsx";
import type { FormItemConfigs } from "../../global.ts";

interface FormItemProps {
  item: FormItemConfigs;
  index: number;
  style?: React.CSSProperties;
}

const FormItem = ({ item, index, style }: FormItemProps) => {
  const renderCustomNode = (customNode: FormItemConfigs['customNode']) => {
    if (typeof customNode === 'function') {
      return (
        <Form.Item
          noStyle
          shouldUpdate
        >
          {(form: any) => {
            const value = form.getFieldValue(item.name);
            return customNode({
              value,
              onChange: (newValue: any) => form.setFieldValue(item.name, newValue),
              form
            });
          }}
        </Form.Item>
      );
    }
    return customNode;
  };

  const renderFormItem = (children: React.ReactNode) => {
    if (item.dependencies) {
      return (
        <Form.Item
          noStyle
          shouldUpdate={(prevValues, currentValues) => {
            return item.dependencies?.some(
              (dep) => prevValues[dep] !== currentValues[dep]
            ) ?? false;
          }}
        >
          {(form) => {
            const values = form.getFieldsValue();
            const visible = item.visible ? item.visible(values) : true;
            if (!visible) return null;
            
            return (
              <Form.Item
                key={index}
                name={item.name ?? item.label}
                label={item.label}
                rules={item.rules}
                style={style}
                help={item.help}
              >
                {children}
              </Form.Item>
            );
          }}
        </Form.Item>
      );
    }

    return (
      <Form.Item
        key={index}
        name={item.name ?? item.label}
        label={item.label}
        rules={item.rules}
        style={style}
        help={item.help}
      >
        {children}
      </Form.Item>
    );
  };

  switch (item.type) {
    case "hidden":
      return <Form.Item key={index} name={item.name} noStyle />;
    case "input":
      return renderFormItem(<Input allowClear placeholder={item.placeholder || "请输入"}/>);
    case "password":
      return renderFormItem(<Input.Password allowClear placeholder={item.placeholder || "请输入"} />);
    case "textarea":
      return renderFormItem(<Input.TextArea allowClear placeholder={item.placeholder || "请选择"}/>);
    case "richtext":
      return renderFormItem(<FormRichEditor />);
    case "marktext":
      return renderFormItem(<FormMarkEditor />);
    case "upload":
      return renderFormItem(
        <FormUpload
          accept={item.accept}
          listType={item.listType || "text"}
          maxCount={item.maxCount || 1}
          style={style}
        >
          <Button value="点击上传" />
        </FormUpload>
      );
    case "custom":
      return renderFormItem(renderCustomNode(item.customNode));
    case "modalPicker":
      return renderFormItem(null);
    case "select":
      return renderFormItem(
        <Select
          options={item.options || []}
          placeholder={item.placeholder || "请选择"}
          mode={item.mode}
          allowClear
          // defaultValue={item.defaultValue}
        />
      );
    case "cascader":
      return renderFormItem(
        <Cascader
          options={item.options || []}
          placeholder={item.placeholder || "请选择"}
          allowClear
        />
      );
    case "date":
      return renderFormItem(
        <DatePicker
          allowClear
          showTime={item.showTime}
          placeholder={item.placeholder || "请选择"}
        />
      );
    case "dateRange":
      return renderFormItem(
        <DatePicker.RangePicker
          allowClear
          showTime={item.showTime}
          placeholder={item.placeholder || ["请选择", "请选择"]}
        />
      );
    case "time":
      return renderFormItem(
        <TimePicker allowClear placeholder={item.placeholder || "请选择"} />
      );
    case "timeRange":
      return renderFormItem(
        <TimePicker.RangePicker
          allowClear
          placeholder={item.placeholder || ["请选择", "请选择"]}
        />
      );
    case "number":
      return renderFormItem(
        <InputNumber 
          max={item.max} 
          min={item.min} 
          placeholder={item.placeholder || "请输入"}
        />
      );
    case "switch":
      return renderFormItem(<Switch />);
    case "jsonEditor":
      return renderFormItem(<FormJsonEditor />);
    default:
      return null;
  }
};

export default FormItem;
